<script setup lang="ts">
import { ref } from 'vue';

import UserSelectDialog from '#/components/userSelectDialog/UserSelectDialog.vue';

const showUserDialog = ref(false);
const selectedUsers = ref<any[]>([]);

const handleUserSelect = (users: any[]) => {
  selectedUsers.value = users;
};

const removeUser = (userId: number | string) => {
  selectedUsers.value = selectedUsers.value.filter(
    (user) => user.id !== userId,
  );
};
</script>

<template>
  <div class="p-6">
    <el-button type="primary" @click="showUserDialog = true">
      选择用户
    </el-button>

    <div v-if="selectedUsers.length > 0" class="mt-4">
      <h3 class="mb-2 text-lg font-medium">已选择的用户:</h3>
      <div class="flex flex-wrap gap-2">
        <el-tag
          v-for="user in selectedUsers"
          :key="user.id"
          closable
          @close="removeUser(user.id)"
        >
          {{ user.name }}
        </el-tag>
      </div>
    </div>

    <UserSelectDialog
      v-model="showUserDialog"
      title="选择用户"
      :default-selected="selectedUsers"
      @confirm="handleUserSelect"
    />
  </div>
</template>
